import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-tag-control-demo',
  templateUrl: './tag-control-demo.component.html',
  styleUrl: './tag-control-demo.component.less',
})
export class TagControlDemoComponent {
  tags = ['Unremovable', 'Tag 1', 'Tag 2'];

  inputValue = '';
  inputVisible = false;
  @ViewChild('inputEl', { static: false }) inputEl!: ElementRef;

  removeTag(tag: string) {
    this.tags = this.tags.filter((t) => t != tag);
  }

  addTag(tag: string) {
    this.tags = [...this.tags, tag];
  }

  showInput() {
    this.inputVisible = true;
    setTimeout(() => {
      this.inputEl?.nativeElement.focus();
    }, 20);
  }

  addTagFromInput() {
    if (this.inputValue) {
      this.addTag(this.inputValue);
      this.inputValue = '';
      this.inputVisible = false;
    }
  }

  sliceTag(tag: string) {
    if (tag.length > 10) {
      return tag.substring(0, 10) + '...';
    }
    return tag;
  }
}
